<template>
  <div class="abulk">
    <header>
      <span class="logo">
        <img src="../img/2.gif" alt />
      </span>
      <span>团 购</span>
      <span class="return" @click="back()">
        <van-icon name="arrow-left" />
      </span>
    </header>
    <div class="gro_menu">
      <dl v-for="(item,index) in list" :key="index">
        <dt @click="toDetail(item)">
          <img :src="item.url" alt />
        </dt>
        <dd>
          <p  @click="toDetail(item)">{{item.name}}</p>
          <p  @click="toDetail(item)">{{item.site}}</p>
          <p  @click="toDetail(item)">
            活动时间: {{item.time}}
            <span>已报名:5人</span>
          </p>
          <p>
            <a-switch checked-children="开" un-checked-children="关" default-checked />
            <button id="btn">开团</button>
            <button id="btn2">删除</button>
          </p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import axios from "../../ulis/request";
import { log } from "util";
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    //调用函数
    this.getList();
  },
  methods: {
    //列表渲染
    getList() {
      axios({
        url: "/api/abulkList",
      }).then(res => {
        if (res.data.code === 1) {
          this.list = res.data.data;
        } else {
          this.$router.push(`/login`);
        }
      });
    },
    //进入团购详情
    toDetail(item) {
      this.$router.push(`/abulkDetail/${item.id}`);
    },
    //返回上一级
    back() {
      this.$router.push(`/`);
    }
  }
};
</script>

<style>
.abulk {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.abulk header {
  width: 100%;
  height: 60px;
  background-color: #2997fb;
  text-align: center;
  line-height: 60px;
}

.abulk header span {
  color: white;
  float: right;
  margin-right: 80px;
  /* vertical-align: middle; */
  font-size: 18px;
}

.abulk header .logo {
  float: right;
  margin-right: 10px;
}

.abulk header .return {
  float: left;
  margin-left: 30px;
  vertical-align: middle;
  margin-top: 3px;
}

.gro_menu {
  flex: 1;
  overflow-y: auto;
}
.gro_menu dl {
  width: 95%;
  height: 350px;
}
.gro_menu dl dt img {
  width: 100%;
  height: 200px;
  margin-left: 10px;
  margin-top: 10px;
}
.gro_menu dl dd {
  padding-top: 10px;
  padding-left: 10px;
  line-height: 10px;
}
.gro_menu dl dd p:nth-of-type(1) {
  font-weight: bold;
  font-size: 18px;
  padding-top: 5px;
}
.gro_menu dl dd p:nth-of-type(2) {
  font-size: 18px;
  color: rgb(34, 34, 34);
  padding-top: 5px;
}
.gro_menu dl dd p:nth-of-type(3) {
  font-size: 14px;
  color: rgb(34, 34, 34);
  padding-top: 5px;
}
.gro_menu dl dd p:nth-of-type(3) span {
  padding-left: 60px;
  color: rgb(34, 34, 34);
}
.gro_menu #btn {
  width: 60px;
  height: 32px;
  border: none;
  outline: none;
  border-radius: 5px;
  color: #fff;
  margin-left: 160px;
  background: linear-gradient(45deg, #0675f1, #1886f6, #2d99fb);
}
.gro_menu #btn2 {
  width: 60px;
  height: 32px;
  border: none;
  outline: none;
  border-radius: 5px;
  color: rgb(168, 167, 167);
  margin-left: 10px;
}
</style>